<template>
  <div class="container">


    <div class="row">
      <!--      <el-button type="primary" @click="handleConfirm">确认</el-button>-->
      <el-button type="primary" class="action-button" size="mini" @click="openFile">选择要替换音色的音频文件</el-button>

    </div>

    <div class="row">
      <span class="description">{{filePath}}</span>
    </div>

    <div class="row">
      <el-button type="danger" class="action-button" size="mini" @click="ensure">确认</el-button>
    </div>

  </div>
</template>

<script>



import {get} from "@/util/api";

export default {
  data() {
    return {
      isPingRunning: false,
      filePath:''
    };
  },
  components: {
    // OutputConsole,
  },
  methods: {
    async openFile() {
      this.filePath = await window.electronAPI.openFileDialog();
      console.log(this.filePath);
    },
    ensure(){
      get('/sovits/convert', {filePath: this.filePath}).then(res => {
        console.log(res);
      })
    }
  },
};

</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.row {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.description {
  margin-right: 10px;
}

.action-button {
  font-size: 12px;
  padding: 4px 8px;
}
</style>
